<template>
    <div id="airPlace">
        <div class="case">
            <div class="case-title">
                <div class="case-name">
                    东方航空
                </div>
                <div class="case-info">
                    {{title}}(5天往返)参考航班
                </div>
            </div>
        </div>
        <div class="triketinfo">
            <div class="air-triket">
                <p class="air-tri-title">DAY1&nbsp;中国东方航空MU205</p>
                <div class="air-time">
                    <div class="left">
                        <h2>10:05</h2>
                        <p>上海浦东机场</p>
                    </div>
                    <div class="middle">
                        4小时20分
                    </div>
                    <div class="right">
                        <h2>13:25</h2>
                        <p>清迈国际机场</p>
                    </div>
                </div>
                <div class="goinfo">
                    往
                </div>
            </div>
            <div class="air-triket">
                <p class="air-tri-title">DAY1&nbsp;中国东方航空MU205</p>
                <div class="air-time">
                    <div class="left">
                        <h2>10:05</h2>
                        <p>清迈国际机场</p>
                    </div>
                    <div class="middle">
                        4小时20分
                    </div>
                    <div class="right">
                        <h2>13:25</h2>
                        <p>上海浦东机场</p>
                    </div>
                </div>
                <div class="goinfo">
                    返
                </div>
            </div>
        </div>
        <!-- {{title}} -->
    </div>
</template>
<script>
export default {
    name:"airPlace",
    props:["title"]
}
</script>
<style lang="less" scoped>
    #airPlace{
        // padding:16px;
        .case{
            .case-title{
                position: relative;
                display: flex;
                padding:5px 10px 10px 10px;
                align-items: center;
                background-image: linear-gradient(90deg,#4ccf9e,#61d97e);
                color:white;
                .case-name{
                    width: 2em;
                    font-size: 1.2em;
                    font-weight: bold;
                    margin-right: 10px;
                }
                .case-info{
                    font-size: 1em;
                    font-weight: bold;
                    padding:0.5em 0 0.5em 1em;
                    border-left: 1px solid gray;
                }
            }
            .case-title::before,.case-title::after{
                content: '';
                display: block;
                width: 12px;
                height: 12px;
                border-radius: 12px;
                background-color: white;
                position: absolute;
                bottom: -6px;
            }
            .case-title::before{
                left: -6px;
            }
            .case-title::after{
                right: -6px;
            }
        }
        .triketinfo{
            border:1px solid rgba(31, 32, 35, 0.1);
            background:white;
            border-radius: 8px;
            padding-left:2.2em;
            .air-triket{
                color:rgba(31, 32, 35, 0.6);
                padding-top: 1.2em;
                position: relative;
                .air-tri-title{
                    margin:0;
                    line-height: 2em;
                    font-size: 1.1em;
                }
                .air-time{
                    display: flex;
                    align-items: center;
                    text-align: center;
                    color:rgba(31, 32, 35, 0.8);
                    .left,.right{
                        width: 35%;
                        h2{
                            margin:0;
                        }
                        p{
                            margin:0;
                        }
                    }
                    .middle{
                        color:rgba(31, 32, 35, 0.5);
                        font-size: 0.9em;
                        
                    }
                    .middle::after{
                        content: "";
                        display: block;
                        width: 40px;
                        height: 2px;
                        background-color:rgba(31, 32, 35, 0.4);
                        margin:auto;
                    }
                }
                .goinfo{
                    display: block;
                    position: absolute;
                    background: #4ccf9e;
                    width: 22px;
                    height: 22px;
                    text-align: center;
                    line-height: 22px;
                    color:white;
                    left:-2.2em;
                    top:1.2em;
                }
            }
        }
    }
</style>

